<template>
  <div class="zui-background-color-base">
    <div class="jia-home-container">
      <router-view />
    </div>
    <van-tabbar v-model="_active">
      <van-tabbar-item v-for="(item, index) in tabbar" :key="index" :icon="item.icon" :to="item.to">{{ item.name }}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tabbar: []
    }
  },
  methods: {
    setTabbar () {
      this.tabbar = [
        {
          icon: 'shop',
          to: 'main',
          name: '首页'
        },
        {
          icon: 'more-o',
          to: 'sort',
          name: '分类'
        },
        {
          icon: 'cart',
          to: 'cart',
          name: '购物车'
        },
        {
          icon: 'contact',
          to: 'me',
          name: '我的'
        }
      ]
    }
  },
  computed: {
    // 计算属性，根据url计算哪个tab应该点亮
    _active: {
      get () {
        const name = this.$route.name
        const tabbar = this.tabbar
        let active = 0
        tabbar.map((element, index) => {
          if (element.name === name) {
            active = index
          }
        })
        return active
      },
      set (val) {
        this.$emit('change', val)
        console.log(val)
      }
    }
  },
  created () {
    this.setTabbar()
  }
}
</script>

<style lang="less">
.jia-home-container {
  height: calc(~"100vh - 50px");
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
